<template>
    <a-card :bordered="false">
        <detail-list title="插件基本信息">
            <detail-list-item term="插件名称">{{ detailData && detailData.name }}</detail-list-item>
            <detail-list-item term="插件版本">{{ detailData && detailData.version }}</detail-list-item>
            <detail-list-item term="插件作者">{{ detailData && detailData.author }}</detail-list-item>
            <detail-list-item term="插件上传时间">{{ detailData && dateFormat(detailData.fixdate) }}</detail-list-item>
            <detail-list-item term="插件图标">{{ detailData && detailData.icon }}</detail-list-item>
            <detail-list-item term="插件描述">{{ detailData && detailData.describes }}</detail-list-item>
        </detail-list>
        <a-divider style="margin-bottom: 32px"/>
        <div class="title">插件功能列表</div>
        <a-table
          row-key="id"
          style="margin-bottom: 24px"
          :columns="funColumns"
          :dataSource="funData"
          :pagination="false"
        >
        </a-table>
    </a-card>
</template>

<script>
import DetailList from '../../components/tool/DetailList'
import { getPluginList } from '@/services/plugins'
import { STATE_SUCCESS } from '@/services/api'
import moment from 'moment'

const DetailListItem = DetailList.Item

const funColumns = [
  {
    title: '功能名称',
    dataIndex: 'name',
    key: 'name'
  },
  {
    title: '图标',
    dataIndex: 'icon',
    key: 'icon'
  },
  {
    title: '链接地址',
    dataIndex: 'url',
    key: 'url'
  },
  {
    title: '描述',
    dataIndex: 'describes',
    key: 'describes'
  }
]

export default {
    name: 'BasicDetail',
    components: { DetailListItem, DetailList },
    data () {
        return {
            funColumns,
            funData: [],
            detailData: {}
        }
    },
    methods: {
        // 查询插件列表或明细
        getDetail (id) {
            console.log(id, "getDetail")
            getPluginList({ id }).then(res => {
                let { result } = res['data']
                if (result['state'] == STATE_SUCCESS) {
                    this.detailData = result['data'][0]
                    this.funData = this.detailData['function']
                    console.log('detaildata', this.detailData)
                }
            })
        },
        /*日期处理*/
        dateFormat:function(date){
            if(date === undefined){
                return ''
            }
            return moment(date).format("YYYY-MM-DD HH:mm:ss")
        },
    },
    created () {
        console.log(this.$route.query.id)
        this.getDetail(this.$route.query.id)
    }
}
</script>

<style lang="less" scoped>
  .title {
    color: @title-color;
    font-size: 16px;
    font-weight: 600;
    margin-bottom: 16px;
  }
</style>
